<script setup lang="ts">
import router from "@/router";
import { useArticleStore } from "@/stores/articleStore";
import type { search_data } from "@/types/Search";
import { Formattime } from "@/logics/geshiitem";
//获取文章的store对象
const articleStore = useArticleStore();
//获取标签
articleStore.getArticle_tags();
//获取路由信息
const route = useRoute();

//搜索数据
const search_datas = ref<search_data>({
  key: "",
  page: 1,
  order: "",
  word: [],
  tag: "",
});
//获取传来的搜索关键字
function getqueryKey() {
  if (route.params.key === "") {
    articleStore.getsearch_Article(search_datas.value);
  } else {
    search_datas.value.key = route.params.key[0];
    articleStore.getsearch_Article(search_datas.value);
  }
}
getqueryKey();
function Search() {
  articleStore.getsearch_Article(search_datas.value);
}
//跳转
function Articttioazhuan(nid: number) {
  let routeUrl = router.resolve({
    path: `/article/${nid}`,
  });
  window.open(routeUrl.href, "_blank");
}
//分页搜索
function Searchpage(val: number) {
  search_datas.value.page = val;
  Search();
}
//搜索方法
</script>

<template>
  <main>
    <BKTopNav></BKTopNav>
    <div>
      <div class="main">
        <div class="search_box">
          <div>染柒|搜索</div>
          <div>
            <input
              v-model="search_datas.key"
              @keyup.enter="Search()"
              type="text"
              placeholder="搜索你想要的内容"
            />
          </div>
          <div>
            <button @click="Search()"><i class="fa fa-search"></i>搜索</button>
          </div>
        </div>
        <div class="search_criteria">
          <ul>
            <li :class="{ active: !search_datas.order }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.order = ''), Search()"
                >综合排序</a
              >
            </li>
            <li :class="{ active: search_datas.order == 'change_date' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.order = 'change_date'), Search()"
                >最新发布</a
              >
            </li>
            <li :class="{ active: search_datas.order == 'look_count' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.order = 'look_count'), Search()"
                >最多浏览</a
              >
            </li>
            <li :class="{ active: search_datas.order == 'digg_count' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.order = 'digg_count'), Search()"
                >最多点赞</a
              >
            </li>
            <li :class="{ active: search_datas.order == 'collects_count' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.order = 'collects_count'), Search()"
                >最多收藏</a
              >
            </li>
            <li :class="{ active: search_datas.order == 'comment_count' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.order = 'comment_count'), Search()"
                >最多评论</a
              >
            </li>
          </ul>
          <ul>
            <li :class="{ active: search_datas.word![0] === undefined}">
              <a
                href="JavaScript: ;"
                @click="(search_datas.word = []), Search()"
                >全部字数</a
              >
            </li>
            <li :class="{ active: search_datas.word![1] == '100' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.word = ['0', '100']), Search()"
                >100字以内</a
              >
            </li>
            <li :class="{ active: search_datas.word![1] == '500' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.word = ['100', '500']), Search()"
                >100字到500字</a
              >
            </li>
            <li :class="{ active: search_datas.word![1] == '1000' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.word = ['500', '1000']), Search()"
                >500字到1000字</a
              >
            </li>
            <li :class="{ active: search_datas.word![1] == '3000' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.word = ['1000', '3000']), Search()"
                >1000字到3000字</a
              >
            </li>
            <li :class="{ active: search_datas.word![1] == '5000' }">
              <a
                href="JavaScript: ;"
                @click="(search_datas.word = ['3000', '5000']), Search()"
                >3000字到5000字</a
              >
            </li>
          </ul>
          <ul>
            <li :class="{ active: search_datas.tag == '' }">
              <a href="JavaScript: ;" @click="(search_datas.tag = ''), Search()"
                >全部标签</a
              >
            </li>
            <li
              v-for="item in articleStore.Cover_tags.result.tags_List"
              :key="item.nid"
              :class="{ active: search_datas.tag == item.title }"
            >
              <a
                href="JavaScript: ;"
                @click="(search_datas.tag = item.title), Search()"
                >{{ item.title }}</a
              >
            </li>
          </ul>
        </div>
        <div
          class="images"
          v-if="articleStore.search_article.result.length === 0"
        >
          <img
            src="https://s1.hdslb.com/bfs/static/laputa-search/client/assets/nodata.67f7a1c9.png"
            alt=""
          />
        </div>
        <div class="search_content">
          <li
            @click="Articttioazhuan(item.nid)"
            v-for="item in articleStore.search_article.result"
            :key="item.nid"
          >
            <a href="JavaScript: ;" class="img">
              <img :src="item.cover" alt="" />
            </a>
            <div class="info">
              <div class="title">
                <a href="">{{ item.title }}</a>
              </div>
              <div class="icon">
                <span>
                  <i class="fa fa-lock"></i>
                  {{ item.collects_count }}
                </span>
                <span>
                  <i class="fa fa-clock-o"></i>
                  {{ Formattime(item.change_date) }}
                </span>
              </div>
            </div>
          </li>
        </div>
        <div class="pager">
          <el-pagination
            background
            :page-size="10"
            @current-change="Searchpage"
            layout="prev, pager, next"
            :prev-text="'上一页'"
            :next-text="'下一页'"
            :total="articleStore.search_article.count"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <BKFooter></BKFooter>
  </main>
</template>

<style scoped lang="scss">
.main {
  width: 1080px;

  margin: 0 auto;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .search_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    > div {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
    input {
      width: 300px;
      height: 40px;
      outline: none;
      border: none;
      border-radius: 5px;
      padding-left: 10px;
      border: 1px solid #777;
    }
    button {
      width: 100px;
      border-radius: 5px;
      height: 40px;
      background-color: #00a1d6;
      color: var(--el-bg-color);
      border: none;
    }
  }
  .search_criteria {
    margin: 20px 0;
    width: 100%;
    font-size: 13px;
    &::before {
      display: block;
      width: 100%;
      height: 1px;
      background-color: #808595;
      content: "";
    }
    &::after {
      display: block;
      width: 100%;
      height: 1px;
      background-color: #808595;
      content: "";
      margin-top: 20px;
    }
    > ul {
      display: flex;
      list-style: none;
      margin: 10px 0;
      > li {
        padding: 3px 8px;
        margin-right: 10px;
        a {
          color: var(--el-text-color-primary);
        }

        &:hover {
          a {
            color: #00a1d6;
          }
        }
      }
      > li.active {
        background-color: #00a1d6;
        a {
          color: var(--el-bg-color);
        }
      }
    }
  }
  .search_content {
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 190px;
      height: 190px;
      border: 1px solid #e5e9ef;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 30px 30px 0;
      &:nth-child(5n) {
        margin-right: 0;
      }
      .img {
        display: block;
        width: 100%;
        height: 100px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
      .info {
        padding: 8px;
        .title {
          margin-bottom: 5px;
          height: 42px;
        }
        a {
          color: var(--el-text-color-primary);
          font-size: 14px;
        }
        .icon {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .pager {
    margin: 20px 0;
    .el-pager .number {
      font-size: 15px;
      font-weight: 400;
      border: 1px solid #e5e9ef;
    }
  }
}
</style>
